<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用自定义事件的表单输入组件</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>
    <div id="app_custom">
        <custom-input v-model="price"></custom-input>
    </div>

    <script>
        Vue.component('custom-input',{
            template:'\
                <span>\
                $\
                    <input\
                        ref="input" \
                        v-bind:value="value"\
                        v-on:input="updateValue($event.target.value)"\
                    >\
                </span>',
            props:['value'],
            methods:{
                //不是直接更新值，而是使用此方法来对输入的值进行格式化和位数限制
                updateValue:function (value) {
                    var formattedValue = value.trim().slice(
                        0,
                        value.indexOf('.')===-1 ? value.length:value.indexOf('.')+3 );
                    //如果值不统一，手动覆盖保持一致
                    if(formattedValue != value) {
                        this.$refs.input.value = formattedValue;
                    }
                    //通过input事件发出数值
                    this.$emit('input',Number(formattedValue))
                }
            }
        })
        var app_custom = new Vue({
            el:'#app_custom',
            data:{
                price:0
            }
        })

    </script>


</body>
</html>